<template>
  <div>
    <div class="addcourse-bottom">
      <div class="title">编辑课程</div>
      <div class="bottom-content">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="课程名称：" prop="course_name" style="width: 400px">
            <el-input v-model="ruleForm.course_name" placeholder="请输入课程名称"></el-input>
          </el-form-item>
          <el-form-item label="所属班级：" prop="class">
            <el-select v-model="ruleForm.course_class_name" placeholder="请选择" @change="classChange">
              <el-option
                v-for="item in optionsClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水平：" prop="class">
            <el-select v-model="ruleForm.course_level_name" placeholder="请选择" @change="levelChange">
              <el-option
                v-for="item in optionsLevel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属章节：" prop="class">
            <el-select
              v-model="ruleForm.course_chapter_name"
              placeholder="请选择"
              @change="chapterChange"
            >
              <el-option
                v-for="item in optionsChapter"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字：" prop="word" style="width: 400px" class="word">
            <el-input v-model="ruleForm.num" placeholder="请输入字数"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="languague">
            <el-select v-model="ruleForm.course_type_name" placeholder="请选择">
              <el-option
                v-for="item in optionsLang"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上课时间">
            <el-col :span="11" style="width: 169px">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.course_start_time"
                style="width: 100%;"
                align="left"
                @change="DataChange"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-col>
            <el-select
              v-model="ruleForm.course_time"
              placeholder="请选择周"
              class="data-select"
              @change="weekChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="课程详情头图：" style="white-space: nowrap">
            <el-upload
              accept="video"
              class="avatar-uploader"
              action="http://yaya.izhixiu.cn/api/common/uploadVideo"
              :show-file-list="false"
              :on-success="handleAudioSuccess"
            >
              <el-button
                style="width: 120px; background: #e9e9e9; border:none; color: #444"
                size="small"
                type="success"
              >上传视频</el-button>
            </el-upload>
            <img v-if="ruleForm.course_cover_url" :src="ruleForm.course_cover_url" class="avatar" />
            <i v-else class="el-icon-picture avatar-uploader-icon"></i>
          </el-form-item>
          <el-form-item label="课程介绍:">
            <Ueditor ref="ue"></Ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Ueditor from "@/common/editor/editor";
import {
  chooseLevel,
  chooseChapter,
  chooseLang,
  chooseClass
} from "@/api/operation";
import { ERR_OK } from "@/api/config";
import { async } from "q";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      is_first_class: true,
      is_first_lang: true,
      is_first_chapter: true,
      is_first_level: true,
      optionsClass: [],
      optionsLevel: [],
      optionsChapter: [],
      optionsLang: [],
      options: [
        {
          value: "周一",
          label: "周一"
        },
        {
          value: "周二",
          label: "周二"
        },
        {
          value: "周三",
          label: "周三"
        },
        {
          value: "周四",
          label: "周四"
        },
        {
          value: "周五",
          label: "周五"
        },
        {
          value: "周六",
          label: "周六"
        },
        {
          value: "周日",
          label: "周日"
        }
      ],
      rules: {
        course_name: [
          { required: true, message: "请输入课程名称", trigger: "blur" }
        ],
        course_class_name: [
          { required: true, message: "请选择班级", trigger: "blur" }
        ],
        course_type_name: [
          { required: true, message: "请选择语言", trigger: "blur" }
        ],
        num: [{ required: true, message: "请输入字数", trigger: "blur" }],
        course_start_time: [
          { required: true, message: "请选择上课时间", trigger: "blur" }
        ],
        course_time: [
          { required: true, message: "请选择星期", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    setContent() {
      this.ruleForm.description = this.$refs.ue.content;
      this.$emit("sendParamsFirst", this.ruleForm);
      console.log(this.ruleForm);
    },
    handleAudioSuccess(res) {
      // console.log(res)
      this.ruleForm.course_cover_url = res.video_cover;
      this.ruleForm.course_video_url = res.dest;
    },
    chapterChange() {},
    levelChange(val) {
      this.ruleForm.course_level_id = val;
      this.optionsChapter = [];
      this._chooseChapter(val);
    },
    classChange(val) {
      // console.log(val);
      this.ruleForm.course_class_id = val;
      this.optionsLevel = [];
      this._chooseLevel(val);
    },
    weekChange(val) {
      this.ruleForm.course_start_time = val;
    },
    DataChange(val) {
      this.ruleForm.course_time = val;
    },
    formatArray(list, arr, valueName, labelName) {
      list.forEach(item => {
        arr.push({
          value: item[`${valueName}`],
          label: item[`${labelName}`]
        });
      });
    },
    formatId(arr, name) {
      let index = arr.findIndex(item => {
        return item.label === name;
      });
      // console.log(index);

      if (index >= 0) return arr[index].value;
    },
    _chooseClass() {
      chooseClass().then(res => {
        if (res.code == ERR_OK) {
          // console.log(res)
          this.formatArray(res.list, this.optionsClass, "id", "class_name");
        }
      });
    },
    _chooseLevel(id) {
      chooseLevel(id)
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(res)
            let ret = res.data.list;
            this.formatArray(
              ret,
              this.optionsLevel,
              "class_relationship_id",
              "level"
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _chooseChapter(id) {
      chooseChapter(id)
        .then(res => {
          // console.log(res);
          if (res.code == ERR_OK) {
            let ret = res.data.list;
            this.formatArray(ret, this.optionsChapter, "id", "chapter_name");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _chooseLang() {
      chooseLang()
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(res);
            let ret = res.data.list;
            this.formatArray(ret, this.optionsLang, "id", "type_name");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._chooseClass();
    this._chooseLang();
  },
  watch: {
    ruleForm(newVal) {
      this.$refs.ue.content = newVal.description;
    },
    optionsClass() {
      setTimeout(() => {
        console.log(this.ruleForm);
        if (this.is_first_class) {
          let classId = this.formatId(
            this.optionsClass,
            this.ruleForm.course_class_name
          );
          // console.log(this.optionsClass)
          this._chooseLevel(classId);
          this.ruleForm.course_class_id = classId;
          this.is_first_class = false;
        }
      }, 200);
    },
    optionsLevel(newVal) {
      setTimeout(() => {
        if (this.is_first_level) {
          let levelId = this.formatId(
            this.optionsLevel,
            this.ruleForm.course_level_name
          );
          this._chooseChapter(levelId);
          this.ruleForm.course_level_id = levelId;
          this.is_first = false;
        }
      }, 200);

      // console.log(this.ruleForm)
    },
    optionsChapter(val) {
      setTimeout(() => {
        if (this.is_first_chapter) {
          let chapterId = this.formatId(
            this.optionsChapter,
            this.ruleForm.course_chapter_name
          );
          this.ruleForm.course_chapter_id = chapterId;
        }
        this.is_first_chapter = false;
      }, 200);

      // console.log(this.ruleForm)
    },
    optionsLang() {
      setTimeout(() => {
        if (this.is_first_lang) {
          let langId = this.formatId(
            this.optionsLang,
            this.ruleForm.course_type_name
          );
          this.ruleForm.course_type_id = langId;
        }
        this.is_first_lang = false;
      }, 200);
    }
  },
  components: {
    Ueditor
  }
};
</script>
<style lang="scss" scoped>
.addcourse-bottom {
  padding: 20px;
  position: relative;
  top: 135px;
  margin-bottom: 150px;
}
.title {
  margin-bottom: 20px;
}
.data-select {
  margin-left: 7px;
}
.word /deep/ .el-input__inner {
  width: 200px;
  height: 40px;
}
// .el-date-picker /deep/ .el-picker-panel {
//   position: absolute;
//   top: 439px;
// }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-icon-picture {
  background: #ccc;
}
</style>